<template>
	<view class="page">
		<view class="view-cent" style="padding: 20rpx 10rpx;border-bottom: 1rpx solid #F1F1F1;margin-top: 200rpx;">
			<form><input v-model="tel" type="phone" maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="请输入手机号"/></form>
		</view>
		<view class="row-css view-cent" style="padding:0 10rpx;margin-top: 30rpx;">
			<view style="border-bottom: 1rpx solid #F1F1F1;padding: 20rpx 0; margin-right: 20rpx; flex:1;">
				<form><input v-model="code" type="phone" maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" placeholder="请输入验证码"/></form>
			</view>
			<view class="code-view" @click="sendcode">{{ codeText }}</view>
		</view>
		<view v-if="code == ''" class="login-vire">
			<view class="view-login"><text style="color: #FFFFFF;">登录</text></view>
		</view>
		<view v-else class="login-vire" @click="login">
			<view class="view-login" style="background: #2979ff;"><text style="color: #FFFFFF;">登录</text></view>
		</view>
		<view style="color: #2B7CFF;font-size: 24rpx;margin: 40rpx auto;text-align: center;" v-if="backAccountShow">
			<text @click="goBackAccount">如原手机号无法使用，请点击找回账号</text>
		</view>
		<!-- <view class="view-nbutton">未注册用户默认注册</view> -->
		<view class="column-css" style="text-align: center;margin-top: 100rpx;">
			<view class="row-css" style="background: #DCDCDC;margin: 5rpx 20rpx;padding: 5rpx;">
				<text style="color: #2C7DFF;" @click="onpore(1)">《关于印发广东省灵活就业人员参加企业职工基本养老保险办法的通知(粤人社规[2021]5号).PDF》</text>
			</view>
			<view class="row-css" style="background: #DCDCDC;margin: 5rpx 20rpx;padding: 5rpx;">
				<text style="color: #2C7DFF;" @click="onpore(2)">《关于做好灵活就业人员参加失业保险试点相关工作的通知(粤人社函【2021】366号).PDF》</text>
			</view>
			<view class="row-css" style="background: #DCDCDC;margin: 5rpx 20rpx;padding: 5rpx;">
				<text style="color: #2C7DFF;" @click="onpore(3)">《广东省交通运输厅转发《广东省道路运输协会关于从紧从严从细抓好春运期间行业安全生产工作的倡议书》的通知.PDF》</text>
			</view>
		</view>
		<view class="view-terms">
			<view class="row-css" style="margin-left: -150rpx;margin-bottom: 20rpx; align-items: center;">
				<checkbox :checked="ischeckbox" style="transform:scale(0.7)" @click="checkbox()"></checkbox>
				<view class="row-css" style="font-size: 32rpx;">
					<text style="color: #2C7DFF;" @click="onproctocl(1)">《服务协议》</text>
					与
					<text style="color: #2C7DFF;" @click="onproctocl(2)">《隐私政策》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			openid: '',
			tel: '',
			code: '',
			ischeckbox: false,
			time: 60,
			codeText: '获取验证码',
			backAccountShow: true
		};
	},
	methods: {
		onproctocl(type) {
			uni.navigateTo({
				url: '../personal/proctcol?type=' + type
			});
		},
		getcode() {
			let that = this;
			uni.login({
				provider: 'weixin',
				success: function(loginRes) {
					that.wxRequest({
						url: `${that.API}/miniApp/auth/code2Session`,
						method: 'POST',
						data: {
							code: loginRes.code
						},
						success: res => {
							if (res.data.code == 0) {
								that.openid = res.data.data.openid;
							}
						}
					});
				}
			});
		},
		sendcode() {
			var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
			if (this.tel == '' && this.tel != null) {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				});
			} else if (!reg.test(this.tel)) {
				uni.showToast({
					title: '手机格式不正确',
					icon: 'none'
				});
			} else {
				if (this.time == 60) {
					this.timer = setInterval(() => {
						this.codeText = `${this.time}s后获取验证码`;
						this.time--;
						if (this.time < 0) {
							this.time = 60;
							this.codeText = '获取验证码';
							clearInterval(this.timer);
						}
					}, 1000);
					this.wxRequest({
						url: `${this.API}/miniApp/auth/sms-code?tel=` + this.tel,
						method: 'POST',
						title: '验证码发送中...',
						success: res => {
							if (res.data.code == 0) {
								uni.showToast({
									title: '验证码已发送成功',
									icon: 'none'
								});
							}
						}
					});
				}
			}
		},
		async login() {
			var reg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
			if (this.tel == '' && this.tel != null) {
				uni.showToast({
					title: '请输入手机号码',
					icon: 'none'
				});
			} else if (this.code == '' && this.code != null) {
				uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				});
			} else {
				if(!this.ischeckbox){
					uni.showToast({
						title: '请先同意服务条款与隐私协议！',
						icon: 'none'
					});
					return;
				}
				if (this.openid == '') {
					this.getcode();
				}
				let that = this
				const {type} = await this.getUserType();
				if (type === "0") {
					uni.navigateTo({
						url: '/pages/user/businessTypes',
						success(res) {
							res.eventChannel.emit('login', {
								tel: that.tel,
								code: that.code,
								openid: that.openid,
								login: 'sms'
							})
						}
					})
				} else if (type === "1") {
					this.wxRequest({
							url: `${this.API}/miniApp/auth/sms-login?tel=` + this.tel + '&code=' + this.code + '&openid=' + this.openid,
							method: 'POST',
							title: '登录中...',
							success: res => {
								if (res.data.code === 0) {
									uni.setStorageSync(this.DATA_KEY.userInfo, res.data.data.userModel);
									uni.setStorageSync(this.DATA_KEY.token, res.data.data.token);
									if (res.data.data.userModel.etpId != '' && res.data.data.userModel.etpName != '') {
										uni.setStorageSync(this.DATA_KEY.etpId, res.data.data.userModel.etpId);
										uni.setStorageSync(this.DATA_KEY.etpName, res.data.data.userModel.etpName);
									}
									uni.setStorageSync('loginType', 1)
									uni.switchTab({
										url:'/pages/index/taskhome'
									});
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
						}
					})
				} else if (type === "2") {
					this.wxRequest({
							url: `${this.API}/miniApp/auth/sms-login-captain?tel=` + this.tel + '&code=' + this.code + '&openid=' + this.openid,
							method: 'POST',
							title: '登录中...',
							success: res => {
								if (res.data.code === 0) {
									uni.setStorageSync(this.DATA_KEY.userInfo, res.data.data.userModel);
									uni.setStorageSync(this.DATA_KEY.token, res.data.data.token);
									if (res.data.data.userModel.etpId != '' && res.data.data.userModel.etpName != '') {
										uni.setStorageSync(this.DATA_KEY.etpId, res.data.data.userModel.etpId);
										uni.setStorageSync(this.DATA_KEY.etpName, res.data.data.userModel.etpName);
									}
									uni.setStorageSync('loginType', 2)
									uni.reLaunch({
										url:'/pages/ship/index/task'
									});
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									})
								}
						}
					})
				}
				
			}
		},
		getUserType() {
			return new Promise((resolve, reject) => {
				let that = this
				that.wxRequest({
					url: `${that.API}/captainApp/customerType?tel=` + that.tel + '&code=' + that.code,
					method: 'GET',
					success: res => {
						if (res.data.code == 0) {
							resolve(res.data.data)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							resolve(false)
						}
					}
				})
			})
		},
		close() {
			this.tel = '';
		},
		checkbox: function() {
			this.ischeckbox = !this.ischeckbox;
		},
		onpore(porttype) {
			let url = '';
			let filename = '';
			if (porttype == 1) {
				url =
					'https://ocs-oss.oss-cn-beijing.aliyuncs.com/ocs/1%20%E5%85%B3%E4%BA%8E%E5%8D%B0%E5%8F%91%E5%B9%BF%E4%B8%9C%E7%9C%81%E7%81%B5%E6%B4%BB%E5%B0%B1%E4%B8%9A%E4%BA%BA%E5%91%98%E5%8F%82%E5%8A%A0%E4%BC%81%E4%B8%9A%E8%81%8C%E5%B7%A5%E5%9F%BA%E6%9C%AC%E5%85%BB%E8%80%81%E4%BF%9D%E9%99%A9%E5%8A%9E%E6%B3%95%E7%9A%84%E9%80%9A%E7%9F%A5%EF%BC%88%E7%B2%A4%E4%BA%BA%E7%A4%BE%E8%A7%84%5B2021%5D5%E5%8F%B7%EF%BC%89.pdf';
				filename = '关于印发广东省灵活就业人员参加企业职工基本养老保险办法的通知(粤人社规[2021]5号)';
			} else if (porttype == 2) {
				url =
					'https://ocs-oss.oss-cn-beijing.aliyuncs.com/ocs/2%20%E5%85%B3%E4%BA%8E%E5%81%9A%E5%A5%BD%E7%81%B5%E6%B4%BB%E5%B0%B1%E4%B8%9A%E4%BA%BA%E5%91%98%E5%8F%82%E5%8A%A0%E5%A4%B1%E4%B8%9A%E4%BF%9D%E9%99%A9%E8%AF%95%E7%82%B9%E7%9B%B8%E5%85%B3%E5%B7%A5%E4%BD%9C%E7%9A%84%E9%80%9A%E7%9F%A5%28%E7%B2%A4%E4%BA%BA%E7%A4%BE%E5%87%BD%E3%80%902021%E3%80%91366%E5%8F%B7%29.pdf';
				filename = '关于做好灵活就业人员参加失业保险试点相关工作的通知(粤人社函【2021】366号)';
			} else if (porttype == 3) {
				url =
					'https://ocs-oss.oss-cn-beijing.aliyuncs.com/ocs/%E5%B9%BF%E4%B8%9C%E7%9C%81%E4%BA%A4%E9%80%9A%E8%BF%90%E8%BE%93%E5%8E%85%E8%BD%AC%E5%8F%91%E3%80%8A%E5%B9%BF%E4%B8%9C%E7%9C%81%E9%81%93%E8%B7%AF%E8%BF%90%E8%BE%93%E5%8D%8F%E4%BC%9A%E5%85%B3%E4%BA%8E%E4%BB%8E%E7%B4%A7%E4%BB%8E%E4%B8%A5%E4%BB%8E%E7%BB%86%E6%8A%93%E5%A5%BD%E6%98%A5%E8%BF%90%E6%9C%9F%E9%97%B4%E8%A1%8C%E4%B8%9A%E5%AE%89%E5%85%A8%E7%94%9F%E4%BA%A7%E5%B7%A5%E4%BD%9C%E7%9A%84%E5%80%A1%E8%AE%AE%E4%B9%A6%E3%80%8B%E7%9A%84%E9%80%9A%E7%9F%A5.pdf';
				filename = '广东省交通运输厅转发《广东省道路运输协会关于从紧从严从细抓好春运期间行业安全生产工作的倡议书》的通知';
			}
			uni.showLoading({
				title: '合同信息加载中。。。',
				mask: true
			});
			// #ifdef MP-WEIXIN
			uni.downloadFile({
				url: url,
				// #ifdef MP-WEIXIN
				filePath: wx.env.USER_DATA_PATH + '/' + filename + '.pdf', //指定的本地文件路径   一定要带文件后缀名  不然无法打开   wx.env.USER_DATA_PATH类似本地文件根目录
				// #endif
				success(res) {
				
					let data = '';
					// #ifdef MP-WEIXIN
					data = res.filePath;
					// #endif
					// #ifdef APP-PLUS
					data = res.tempFilePath;
					// #endif
					uni.openDocument({
						filePath: data,
						showMenu: true, //表示右上角是否有转发按钮
						fileType: 'pdf',
						success: function(res) {
							uni.hideLoading();
							console.log('打开文档成功');
						}
					});
				}
			});
			// #endif
			// #ifdef APP-PLUS
			plus.downloader
				.createDownload(
					url,
					{
						filename: '_downloads/' + filename + '.pdf'
					},
					function(d, status) {
						// 下载完成
						if (status == 200) {
							console.log('Download success: ' + d);
							console.log('Download success: ' + d.filename);
							uni.openDocument({
								filePath: d.filename,
								showMenu: true, //表示右上角是否有转发按钮
								fileType: 'pdf',
								success: function(res) {
									uni.hideLoading();
									console.log('打开文档成功');
								}
							});
						} else {
							console.log('下载失败: ' + status);
						}
					}
				)
				.start();
			// #endif
		},
		protocolBrowse: function() {
			uni.navigateTo({
				url: '/pages/login/protocol'
			});
		},
		privacyBrowse: function() {
			uni.navigateTo({
				url: '/pages/login/privacy'
			});
		},
		goBackAccount() {
			// uni.navigateTo({
			// 	url: '/pages/account/backAccount'
			// })
			this.wxRequest({
				url: `${this.API}/driverService/getSysOption`,
				method: 'GET',
				data: {},
				success: res => {
					console.log(res)
					if(res.data.msg == 1){
						uni.navigateTo({
							url: '/pages/account/backAccount'
						})
					} else {
						uni.showModal({
							content: '如您的原手机号无法接收登陆短信，请联系平台管理员找回账号并修改手机号',
							showCancel: false,
							success(modalRes) {
								if (modalRes.confirm) {
									
								}
							}
						})
					}
				}
			})
		},
	},
	onLoad(options) {
		const eventChannel = this.getOpenerEventChannel();
		this.eventChannel = eventChannel;
		let that = this;
		eventChannel.on('login', function(params) {
			let { phone } = params;
			that.tel = phone;
			that.backAccountShow = false
		})
		this.getcode();
	},
	onUnload() {
		this.eventChannel.off('login');
	}
};
</script>

<style>
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background: #ffffff;
}

.row-css {
	display: flex;
	flex-direction: row;
}

.column-css {
	display: flex;
	flex-direction: column;
}

.view-cent {
	padding-left: 15upx;
	flex: 1;
	font-size: 30rpx;
	margin: 0 50rpx;
}

.code-view {
	width: 230rpx;
	text-align: center;
	font-size: 28rpx;
	color: #ffffff;
	background: #2979ff;
	border: 1rpx solid #2979ff;
	padding: 20rpx 0;
}

.view-login {
	display: flex;
	justify-content: center;
	text-align: center;
	margin-top: 50upx;
	float: none;
	background-size: cover;
	margin-left: 70upx;
	margin-right: 70upx;
	padding-top: 20upx;
	padding-bottom: 20upx;
	font-size: 28rpx;
	width: 100%;
	height: 100%;
	border-radius: 50rpx;
	background: #a0c3ff;
}
.view-nbutton {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20rpx;
	color: #999999;
	font-size: 28rpx;
}
.view-terms {
	display: flex;
	position: fixed;
	bottom: 20rpx;
	justify-content: center;
	width: 100%;
	font-size: 24rpx;
}
.login-vire {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20rpx;
}
</style>
